<template>
  <!-- 列表 -->
  <div>
    <div>
        <Cson style="margin:0 0 0.06rem 0.15rem;" @emitcson="fun">点我</Cson>
    </div>
    <div id="box">
      <div v-for="(v,i) in sdata" :key="i" >
        <a  class="boxson" :href="v.url">
          <img class="left" :src="v.imgurl" alt="" />
          <div class="right">
            <h4 class="rp1">{{v.tit}}</h4>
            <p class="rp2">{{v.des}}</p>
          </div>
        </a>
      </div>
    </div>
  </div>
</template>

<script>
import Cson from "./cson.vue";
export default {
  name: "Cfather",
  data() {
    return {
      sdata:''
    };
  },
  methods:{
    fun(cson){
      console.log(cson)
      this.sdata=cson
    }
  },
  components: {
    Cson,
  },
};
</script>

<style scoped>
#box{
  /* border: .01rem solid greenyellow; */
  margin: 0 .15rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.boxson{
  border-radius: .06rem;
  width: 1.83rem;
  height: 0.6rem;
  margin-bottom: .06rem;
  box-shadow: .01rem .01rem .11rem rgb(228, 228, 228);
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: 0 .08rem;
}
.left{
  width: .4rem;
  height: .4rem;
  background-color: rgb(232, 255, 177);
  border-radius: .1rem;
}
.right{
  width: 1.2rem;
  height: .4rem;
  /* box-sizing: border-box;
  border: .01rem solid green; */
}

.rp1{
  /* -webkit-transform: scale(0.833); */
  color:rgb(116, 116, 116);
}
.rp2{
  /* -webkit-transform: scale(0.833); */
  margin-top: .015rem;
  font-size: .1rem;
  color:rgb(161, 161, 161);
}
</style>